<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 第三方调用
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="assemblyName" label="名称" align="center"></el-table-column>
                <el-table-column label="缩略图" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-logo"
                            :src="scope.row.assemblyImg"
                            :preview-src-list="[scope.row.assemblyImg]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="外部引用地址" align="center">
                    <template slot-scope="scope">
                      <div>https://cloudcampusapps.top/bs/{{scope.row.component}}?token=后面拼接右侧获取到的token</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template>
                        <el-button
                            type="text"
                            icon="el-icon-s-comment"
                            @click="useVisible = true"
                        >token获取方法</el-button>
                    </template>
                </el-table-column>


            </el-table>
        </div>

        <!-- 编辑弹出框   table切换品类-->
        <el-dialog title="调用周知" :visible.sync="useVisible" width="30%">
           <div class="handle-box">
                Token获取方法：
                <div class="word">可以请您的前端工作人员在需要展示的页面程序中请求接口xxxxxx/signin/userInfo/auth，并输入{"account": "",	"password": ""}，使用POST方法进行请求访问，即可获取token，将token拼入外部引用地址后面，即可访问到您需要的页面。</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="useVisible = false">取 消</el-button>
                <el-button type="primary" @click="useVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { showLoading, hideLoading } from '../../utils/loading';
export default {
    name: 'basetable',
    data() {
      return {
        tableData: [],
        useVisible: false,
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        showLoading();
        const u = '/screen/assembly/queryAssemblyList?noThird=true';
        this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
        .then((res)=>{
          if(res.data.code == 200){
            this.tableData =  res.data.data;
          }else{
            this.$message.error(res.data.msg);
          };
          hideLoading();
        }).catch((err)=>{
          console.log(err);
        });
      },
    }
};
</script>

<style scoped lang="less">

.part {
  width: 100%;
  display: flex;
  font-size: 16px;
}
.el-table .warning-row {
    background-color: rgb(199, 199, 199);
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-logo {
    display: block;
    margin: auto;
    width: 60px;
    height: 60px;
}
.pagination {
    margin: 20px 0;
    text-align: right;
    display: flex;
    justify-content: space-between;
}
/deep/ .el-upload--text{
    width: 80px;
    height: 32px;
    border: 0px solid #fff;
}
</style>
